<script setup lang="ts">
import type { IMetaTag } from '@/api/interface/system/meta/metaTag'
import type { IMetaTagCategory } from '@/api/interface/system/meta/metaTagCategory'
import { computed, onMounted, ref, watch } from 'vue'
import {
  createMetaTagApi,
  getMetaTagCategoryCountApi,
  getMetaTagListApi,
} from '@/api/modules/system/meta/metaTag'
import { getMetaTagCategoryListApi } from '@/api/modules/system/meta/metaTagCategory'

interface Props {
  modelValue?: number | number[]
  multiple?: boolean
  placeholder?: string
  showCreateButton?: boolean
  showCategoryFilter?: boolean
  frequentTagIds?: number[]
  maxTagCount?: number
}

const props = withDefaults(defineProps<Props>(), {
  multiple: true,
  placeholder: '选择标签',
  showCreateButton: true,
  showCategoryFilter: true,
  frequentTagIds: () => [],
  modelValue: undefined,
  maxTagCount: 10,
})

const emit = defineEmits(['update:modelValue', 'change', 'create'])

// ============ 状态管理 ============
const loading = ref(false)
const submitting = ref(false)
const showTagPicker = ref(false)
const showCreateDialog = ref(false)
const showCategoryPicker = ref(false)

// ============ 数据状态 ============
const tagOptions = ref<IMetaTag.Row[]>([])
const frequentTags = ref<IMetaTag.Row[]>([])
const categories = ref<IMetaTagCategory.Row[]>([])
const categoryCount = ref<Record<number, number>>({})
const selectedTags = ref<number | number[]>(props.modelValue ?? (props.multiple ? [] : 0))
const selectedCategoryId = ref<number | undefined>(undefined)
const searchQuery = ref('')

// ============ 分页相关 ============
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const hasMoreData = ref(false)

// ============ 表单相关 ============
const tagFormRef = ref()
const newTag = ref<IMetaTag.Form>({
  name: '',
  backgroundColor: '#007AFF',
  textColor: '#FFFFFF',
  plain: 'false',
  enable: 'true',
  categoryId: undefined,
})

const rules = {
  name: [{ required: true, message: '请输入标签名称', trigger: 'blur' }],
  backgroundColor: [{ required: true, message: '请选择背景颜色', trigger: 'change' }],
  textColor: [{ required: true, message: '请选择文字颜色', trigger: 'change' }],
}

// Apple风格颜色预设
const appleColors = [
  '#007AFF', // iOS蓝色
  '#34C759', // 系统绿色
  '#FF3B30', // 系统红色
  '#FF9500', // 系统橙色
  '#FFCC00', // 系统黄色
  '#5856D6', // 系统紫色
  '#FF2D92', // 系统粉色
  '#8E8E93', // 系统灰色
  '#000000', // 黑色
  '#FFFFFF', // 白色
]

// ============ 计算属性 ============
const selectedTagsData = computed(() => {
  if (
    !selectedTags.value ||
    (Array.isArray(selectedTags.value) && selectedTags.value.length === 0)
  ) {
    return []
  }

  const ids = Array.isArray(selectedTags.value) ? selectedTags.value : [selectedTags.value]
  const allTags = [...tagOptions.value, ...frequentTags.value]

  return ids
    .map((id) => {
      const tag = allTags.find((t) => t.id === id)
      return (
        tag || {
          id,
          name: `标签${id}`,
          backgroundColor: '#007AFF',
          textColor: '#FFFFFF',
          plain: false,
        }
      )
    })
    .filter(Boolean)
})

const selectedCategoryName = computed(() => {
  if (!selectedCategoryId.value) return '全部分类'
  const category = categories.value.find((c) => c.id === selectedCategoryId.value)
  return category?.name || '全部分类'
})

const tagSelectorText = computed(() => {
  const count = selectedTagsData.value.length
  if (count === 0) return props.placeholder
  if (props.multiple) {
    return count === 1 ? selectedTagsData.value[0].name : `已选 ${count} 个标签`
  }
  return selectedTagsData.value[0]?.name || props.placeholder
})

const categoryColumns = computed(() => [
  [
    { label: '全部分类', value: undefined },
    ...categories.value.map((category) => ({
      label: `${category.name} (${categoryCount.value[category.id as number] || 0})`,
      value: category.id,
    })),
  ],
])

// ============ 监听器 ============
watch(
  () => props.modelValue,
  (newVal) => {
    selectedTags.value = newVal ?? (props.multiple ? [] : 0)
  },
  { immediate: true },
)

// ============ 样式工具函数 ============
function getTagStyle(tag: any) {
  const baseStyle = {
    borderRadius: '12px',
    fontWeight: '400',
    fontSize: '12px',
    border: '1px solid',
  }

  // 确保使用接口返回的颜色字段
  const bgColor = tag.backgroundColor || '#007AFF'
  const textColor = tag.textColor || '#FFFFFF'

  if (tag.plain === 'true' || tag.plain === true) {
    return {
      ...baseStyle,
      color: bgColor,
      borderColor: bgColor,
      backgroundColor: 'transparent',
    }
  } else {
    return {
      ...baseStyle,
      color: textColor,
      backgroundColor: bgColor,
      borderColor: bgColor,
    }
  }
}

// ============ 数据加载函数 ============
async function loadCategories() {
  try {
    const res = await getMetaTagCategoryListApi({
      enable: 'true',
      page: 1,
      limit: 100,
    })
    categories.value = res.data.rows || []
  } catch (error) {
    console.error('获取标签分类失败:', error)
  }
}

async function loadCategoryCount() {
  try {
    const res = await getMetaTagCategoryCountApi()
    if (res.data?.length) {
      const countMap: Record<number, number> = {}
      res.data.forEach((item) => {
        countMap[item.categoryId] = item.count
      })
      categoryCount.value = countMap
    }
  } catch (error) {
    console.error('获取分类标签数量失败:', error)
  }
}

async function loadTagData() {
  loading.value = true
  try {
    // 构建请求参数，过滤掉undefined值
    const params: any = {
      enable: 'true',
      page: currentPage.value,
      limit: pageSize.value,
    }

    // 只有当有搜索关键词时才添加name参数
    if (searchQuery.value && searchQuery.value.trim()) {
      params.name = searchQuery.value.trim()
    }

    // 只有当选择了分类时才添加categoryId参数
    if (selectedCategoryId.value !== undefined && selectedCategoryId.value !== null) {
      params.categoryId = selectedCategoryId.value
    }

    const res = await getMetaTagListApi(params)

    if (currentPage.value === 1) {
      tagOptions.value = res.data.rows || []
    } else {
      tagOptions.value = [...tagOptions.value, ...(res.data.rows || [])]
    }

    total.value = res.data.total || 0
    hasMoreData.value = tagOptions.value.length < total.value
  } catch (error) {
    console.error('获取标签列表失败:', error)
  } finally {
    loading.value = false
  }
}

async function loadFrequentTags() {
  if (!props.frequentTagIds?.length) return

  try {
    const res = await getMetaTagListApi({
      page: 1,
      limit: 100,
      enable: 'true',
    })

    if (res.data.rows?.length) {
      frequentTags.value = res.data.rows.filter((tag) =>
        props.frequentTagIds.includes(Number(tag.id)),
      )
    }
  } catch (error) {
    console.error('获取常用标签失败:', error)
  }
}

async function loadMoreData() {
  if (loading.value || !hasMoreData.value) return
  currentPage.value++
  await loadTagData()
}

// ============ 事件处理函数 ============
// function handleCategoryChange(value: any) {
//   selectedCategoryId.value = value[0]
//   currentPage.value = 1
//   loadTagData()
//   showCategoryPicker.value = false
// }

function handleCategorySelect(categoryId: number | undefined) {
  selectedCategoryId.value = categoryId
  currentPage.value = 1
  loadTagData()
  showCategoryPicker.value = false
}

function handleSearch() {
  currentPage.value = 1
  loadTagData()
}

// function handleSearchInput() {
//   // 移除实时搜索，只在用户点击搜索按钮时才搜索
// }

function toggleTag(tagId: number) {
  if (props.multiple) {
    const ids = Array.isArray(selectedTags.value) ? selectedTags.value : []
    const index = ids.indexOf(tagId)

    if (index > -1) {
      ids.splice(index, 1)
    } else {
      if (ids.length < props.maxTagCount) {
        ids.push(tagId)
      } else {
        uni.showToast({
          title: `最多选择${props.maxTagCount}个标签`,
          icon: 'none',
        })
        return
      }
    }
    selectedTags.value = ids
  } else {
    selectedTags.value = tagId
    showTagPicker.value = false
  }

  emit('update:modelValue', selectedTags.value)
  emit('change', selectedTags.value)
}

function removeTag(tagId: number) {
  if (props.multiple) {
    const ids = Array.isArray(selectedTags.value) ? selectedTags.value : []
    const index = ids.indexOf(tagId)
    if (index > -1) {
      ids.splice(index, 1)
      selectedTags.value = ids
    }
  } else {
    selectedTags.value = 0
  }

  emit('update:modelValue', selectedTags.value)
  emit('change', selectedTags.value)
}

function isTagSelected(tagId: number) {
  if (props.multiple) {
    return Array.isArray(selectedTags.value) && selectedTags.value.includes(tagId)
  } else {
    return selectedTags.value === tagId
  }
}

async function submitNewTag() {
  if (!tagFormRef.value) return

  try {
    await tagFormRef.value.validate()
    submitting.value = true

    const tagData = {
      ...newTag.value,
      plain: newTag.value.plain ? 'true' : 'false',
    }

    await createMetaTagApi(tagData)
    uni.showToast({
      title: '标签创建成功',
      icon: 'success',
    })

    showCreateDialog.value = false
    loadTagData()
    loadCategoryCount()

    // 重置表单
    newTag.value = {
      name: '',
      backgroundColor: '#007AFF',
      textColor: '#FFFFFF',
      plain: 'false',
      enable: 'true',
      categoryId: undefined,
    }

    emit('create')
  } catch (error) {
    console.error('创建标签失败:', error)
    uni.showToast({
      title: '创建标签失败',
      icon: 'none',
    })
  } finally {
    submitting.value = false
  }
}

// ============ 初始化 ============
onMounted(async () => {
  loading.value = true
  try {
    await Promise.all([loadCategories(), loadCategoryCount(), loadTagData(), loadFrequentTags()])
  } catch (error) {
    console.error('初始化标签选择器失败:', error)
  } finally {
    loading.value = false
  }
})
</script>

<template>
  <view class="tag-select-container">
    <!-- 主选择器 - 一行布局 -->
    <view class="main-selector">
      <!-- 分类选择按钮 -->
      <view v-if="showCategoryFilter" class="category-button" @click="showCategoryPicker = true">
        <text class="category-text">
          {{ selectedCategoryName }}
        </text>
        <text class="chevron">›</text>
      </view>

      <!-- 标签选择按钮 -->
      <view class="tag-button" @click="showTagPicker = true">
        <view class="tag-content">
          <text class="tag-text" :class="{ placeholder: selectedTagsData.length === 0 }">
            {{ tagSelectorText }}
          </text>
          <text class="chevron">›</text>
        </view>
      </view>
    </view>

    <!-- 已选标签显示 -->
    <view v-if="selectedTagsData.length > 0 && props.multiple" class="selected-tags-display">
      <view
        v-for="tag in selectedTagsData"
        :key="tag.id"
        class="selected-tag-chip"
        :style="getTagStyle(tag)"
        @click="removeTag(tag.id)"
      >
        <text class="chip-text">
          {{ tag.name }}
        </text>
        <text class="chip-remove">×</text>
      </view>
    </view>

    <!-- 分类选择弹窗 -->
    <wd-popup
      v-model="showCategoryPicker"
      position="bottom"
      :close-on-click-modal="true"
      class="category-popup"
    >
      <view class="popup-header">
        <text class="popup-title">选择分类</text>
        <wd-button type="text" size="small" @click="showCategoryPicker = false">完成</wd-button>
      </view>
      <view class="category-list">
        <view
          v-for="category in [{ id: undefined, name: '全部分类' }, ...categories]"
          :key="category.id || 'all'"
          class="category-item"
          :class="{ active: selectedCategoryId === category.id }"
          @click="handleCategorySelect(category.id)"
        >
          <text class="category-name">
            {{ category.name }}
          </text>
          <text v-if="category.id && categoryCount[category.id]" class="category-count">
            ({{ categoryCount[category.id] }})
          </text>
          <text v-if="selectedCategoryId === category.id" class="check-mark">✓</text>
        </view>
      </view>
    </wd-popup>

    <!-- 标签选择弹窗 -->
    <wd-popup
      v-model="showTagPicker"
      position="bottom"
      :close-on-click-modal="true"
      class="tag-popup"
    >
      <view class="popup-header">
        <text class="popup-title">
          {{ props.multiple ? '选择标签' : '选择标签' }}
        </text>
        <view class="header-actions">
          <wd-button
            v-if="showCreateButton"
            type="text"
            size="small"
            @click="showCreateDialog = true"
          >
            新建
          </wd-button>
          <wd-button type="primary" size="small" @click="showTagPicker = false">完成</wd-button>
        </view>
      </view>

      <!-- 搜索框 -->
      <view class="search-container">
        <view class="search-wrapper">
          <wd-input
            v-model="searchQuery"
            placeholder="搜索标签"
            clearable
            class="search-input"
            @keyup.enter="handleSearch"
          >
            <template #prefix>
              <wd-icon name="search" size="16px" color="#8E8E93" />
            </template>
          </wd-input>
          <wd-button type="primary" size="small" class="search-button" @click="handleSearch">
            搜索
          </wd-button>
        </view>
      </view>

      <!-- 标签列表 -->
      <scroll-view class="tag-scroll-view" scroll-y @scrolltolower="loadMoreData">
        <!-- 常用标签 -->
        <view v-if="frequentTags.length > 0" class="tag-section">
          <text class="section-title">常用标签</text>
          <view class="tag-grid">
            <view
              v-for="tag in frequentTags"
              :key="`frequent-${tag.id}`"
              class="tag-item"
              :class="{ selected: isTagSelected(tag.id) }"
              :style="getTagStyle(tag)"
              @click="toggleTag(tag.id)"
            >
              <text class="tag-label">
                {{ tag.name }}
              </text>
              <text v-if="isTagSelected(tag.id)" class="check-mark">✓</text>
            </view>
          </view>
        </view>

        <!-- 所有标签 -->
        <view v-if="tagOptions.length > 0" class="tag-section">
          <text class="section-title">
            {{ frequentTags.length ? '全部标签' : '标签列表' }}
          </text>
          <view class="tag-grid">
            <view
              v-for="tag in tagOptions"
              :key="`all-${tag.id}`"
              class="tag-item"
              :class="{ selected: isTagSelected(tag.id) }"
              :style="getTagStyle(tag)"
              @click="toggleTag(tag.id)"
            >
              <text class="tag-label">
                {{ tag.name }}
              </text>
              <text v-if="isTagSelected(tag.id)" class="check-mark">✓</text>
            </view>
          </view>
        </view>

        <!-- 加载更多 -->
        <view v-if="hasMoreData" class="load-more-container">
          <view v-if="!loading" class="load-more-btn" @click="loadMoreData">
            <text class="load-more-text">加载更多</text>
            <text class="load-more-arrow">↓</text>
          </view>
          <view v-else class="loading-indicator">
            <wd-loading size="16px" />
            <text>加载中...</text>
          </view>
        </view>

        <!-- 空状态 -->
        <view
          v-if="!loading && tagOptions.length === 0 && frequentTags.length === 0"
          class="empty-state"
        >
          <text class="empty-text">暂无标签</text>
        </view>
      </scroll-view>
    </wd-popup>

    <!-- 创建标签弹窗 -->
    <wd-popup
      v-model="showCreateDialog"
      position="center"
      :close-on-click-modal="false"
      class="create-popup"
    >
      <view class="create-header">
        <text class="create-title">新建标签</text>
        <wd-icon name="close" size="20px" @click="showCreateDialog = false" />
      </view>

      <view class="create-content">
        <wd-form ref="tagFormRef" :model="newTag" :rules="rules">
          <!-- 基础信息 -->
          <view class="input-group">
            <wd-input v-model="newTag.name" placeholder="标签名称" clearable />
          </view>

          <view class="input-group">
            <wd-picker
              v-model="newTag.categoryId"
              :columns="categoryColumns"
              placeholder="选择分类"
            >
              <wd-input :value="selectedCategoryName || '选择分类'" readonly />
            </wd-picker>
          </view>

          <!-- 颜色选择 -->
          <view class="color-section">
            <view class="color-row">
              <text class="color-label">背景</text>
              <view class="color-options">
                <view
                  v-for="color in appleColors.slice(0, 6)"
                  :key="`bg-${color}`"
                  class="color-dot"
                  :class="{ active: newTag.backgroundColor === color }"
                  :style="{ backgroundColor: color }"
                  @click="newTag.backgroundColor = color"
                />
              </view>
            </view>

            <view class="color-row">
              <text class="color-label">文字</text>
              <view class="color-options">
                <view
                  v-for="color in appleColors.slice(0, 6)"
                  :key="`text-${color}`"
                  class="color-dot"
                  :class="{ active: newTag.textColor === color }"
                  :style="{ backgroundColor: color }"
                  @click="newTag.textColor = color"
                />
              </view>
            </view>

            <view class="style-toggle">
              <text class="toggle-label">镂空样式</text>
              <wd-switch v-model="newTag.plain" size="small" />
            </view>
          </view>

          <!-- 预览 -->
          <view class="preview-section">
            <view class="preview-tag" :style="getTagStyle(newTag)">
              <text>{{ newTag.name || '预览效果' }}</text>
            </view>
          </view>
        </wd-form>
      </view>

      <view class="create-footer">
        <wd-button type="default" @click="showCreateDialog = false">取消</wd-button>
        <wd-button type="primary" :loading="submitting" @click="submitNewTag">创建</wd-button>
      </view>
    </wd-popup>
  </view>
</template>

<style scoped lang="scss">
.tag-select-container {
  width: 100%;
}

// ============ 主选择器样式 ============
.main-selector {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;

  .category-button,
  .tag-button {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: #f2f2f7;
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);

    &:active {
      background: #e5e5ea;
      transform: scale(0.97);
      box-shadow: 0 0.5px 2px rgba(0, 0, 0, 0.1);
    }
  }

  .category-button {
    min-width: 110px;

    .category-text {
      font-size: 14px;
      font-weight: 500;
      color: #1d1d1f;
      margin-right: 6px;
      letter-spacing: -0.1px;
    }
  }

  .tag-button {
    flex: 1;

    .tag-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
    }

    .tag-text {
      font-size: 14px;
      font-weight: 500;
      color: #1d1d1f;
      letter-spacing: -0.1px;

      &.placeholder {
        color: #8e8e93;
        font-weight: 400;
      }
    }
  }

  .chevron {
    font-size: 14px;
    color: #8e8e93;
    font-weight: 400;
    transform: rotate(0deg);
    transition: transform 0.3s ease;
  }
}

// ============ 已选标签显示 ============
.selected-tags-display {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;

  .selected-tag-chip {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    border: 1px solid;
    transition: all 0.2s ease;
    max-height: 24px;

    &:active {
      transform: scale(0.95);
    }

    .chip-text {
      margin-right: 4px;
      font-size: 11px;
      font-weight: 400;
    }

    .chip-remove {
      font-size: 12px;
      font-weight: bold;
      line-height: 1;
    }
  }
}

// ============ 弹窗通用样式 ============
.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
  background: rgba(248, 248, 248, 0.95);
  backdrop-filter: blur(20px);

  .popup-title {
    font-size: 17px;
    font-weight: 600;
    color: #1d1d1f;
    letter-spacing: -0.43px;
  }

  .header-actions {
    display: flex;
    gap: 16px;
  }
}

// ============ 分类弹窗样式 ============
.category-popup {
  .popup-header {
    background: #ffffff;
  }

  .category-list {
    background: #ffffff;
    max-height: 50vh;
    overflow-y: auto;
    padding-bottom: calc(env(safe-area-inset-bottom) + 70px);

    .category-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 20px;
      border-bottom: 1px solid #f2f2f7;
      transition: all 0.2s ease;

      &:active {
        background: #f2f2f7;
      }

      &.active {
        background: rgba(0, 122, 255, 0.1);
      }

      &:last-child {
        border-bottom: none;
      }

      .category-name {
        font-size: 16px;
        color: #000000;
        font-weight: 500;
      }

      .category-count {
        font-size: 14px;
        color: #8e8e93;
        margin-left: 8px;
      }

      .check-mark {
        font-size: 16px;
        color: #007aff;
        font-weight: bold;
      }
    }
  }
}

// ============ 标签弹窗样式 ============
.tag-popup {
  .search-container {
    padding: 16px 24px;
    background: #ffffff;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);

    .search-wrapper {
      display: flex;
      align-items: center;
      gap: 12px;

      .search-input {
        flex: 1;
        background: #f2f2f7;
        border-radius: 12px;
        border: none;
        font-size: 16px;

        &:focus {
          background: #e5e5ea;
          box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2);
        }
      }

      .search-button {
        min-width: 60px;
        border-radius: 20px;
        padding: 8px 16px;
        font-weight: 600;
        font-size: 15px;
        letter-spacing: -0.24px;
      }
    }
  }

  .tag-scroll-view {
    height: 50vh;
    background: #ffffff;
    padding-bottom: calc(env(safe-area-inset-bottom) + 70px);

    .tag-section {
      padding: 20px;
      border-bottom: 0.5px solid rgba(0, 0, 0, 0.05);

      &:last-child {
        border-bottom: none;
        padding-bottom: 28px;
      }

      .section-title {
        font-size: 12px;
        font-weight: 600;
        color: #8e8e93;
        margin-bottom: 12px;
        text-transform: uppercase;
        letter-spacing: 1.2px;
      }

      .tag-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;

        .tag-item {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 8px 14px;
          border-radius: 16px;
          font-size: 14px;
          border: 1px solid;
          transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
          min-height: 32px;
          font-weight: 400;
          letter-spacing: -0.1px;

          &:active {
            transform: scale(0.95);
          }

          &.selected {
            box-shadow: 0 2px 8px rgba(0, 122, 255, 0.15);
            transform: scale(1.01);
          }

          .tag-label {
            flex: 1;
            text-align: center;
            white-space: nowrap;
            font-size: 12px;
            font-weight: 400;
            line-height: 1.2;
          }

          .check-mark {
            position: absolute;
            top: -4px;
            right: -4px;
            width: 16px;
            height: 16px;
            background: #007aff;
            color: #ffffff;
            border-radius: 8px;
            font-size: 10px;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1.5px solid #ffffff;
            box-shadow: 0 2px 6px rgba(0, 122, 255, 0.3);
          }
        }
      }
    }

    .load-more-container {
      display: flex;
      justify-content: center;
      padding: 20px;

      .load-more-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px 24px;
        background: #f2f2f7;
        border-radius: 20px;
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);

        &:active {
          background: #e5e5ea;
          transform: scale(0.95);
        }

        .load-more-text {
          font-size: 15px;
          color: #007aff;
          font-weight: 500;
          letter-spacing: -0.24px;
        }

        .load-more-arrow {
          font-size: 14px;
          color: #007aff;
          animation: bounce 2s infinite;
        }
      }

      .loading-indicator {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #8e8e93;
        font-size: 15px;
      }
    }

    .empty-state {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 60px 20px;

      .empty-text {
        color: #8e8e93;
        font-size: 16px;
      }
    }
  }
}

// ============ 通用动画 ============
.tag-select-container {
  transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-4px);
  }
  60% {
    transform: translateY(-2px);
  }
}

// ============ 创建弹窗样式 ============
.create-popup {
  .create-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
    background: rgba(248, 248, 248, 0.95);
    backdrop-filter: blur(20px);

    .create-title {
      font-size: 17px;
      font-weight: 600;
      color: #1d1d1f;
      letter-spacing: -0.43px;
    }
  }

  .create-content {
    padding: 16px;
    max-height: 80vh;
    background: #ffffff;

    .input-group {
      margin-bottom: 12px;
    }

    .color-section {
      margin: 16px 0;
      padding: 16px;
      background: #f8f9fa;
      border-radius: 12px;

      .color-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;

        &:last-child {
          margin-bottom: 0;
        }

        .color-label {
          font-size: 13px;
          color: #1d1d1f;
          font-weight: 500;
          min-width: 32px;
        }

        .color-options {
          display: flex;
          gap: 8px;

          .color-dot {
            width: 24px;
            height: 24px;
            border-radius: 12px;
            border: 2px solid transparent;
            transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            position: relative;

            &.active {
              border-color: #007aff;
              transform: scale(1.05);
              box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);
            }

            &:active {
              transform: scale(0.92);
            }
          }
        }
      }

      .style-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 12px;
        border-top: 1px solid #e5e5ea;
        margin-top: 12px;

        .toggle-label {
          font-size: 13px;
          color: #1d1d1f;
          font-weight: 500;
        }
      }
    }

    .preview-section {
      display: flex;
      justify-content: center;
      padding: 16px 0;

      .preview-tag {
        padding: 6px 12px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 400;
        border: 1px solid;
        transition: all 0.2s ease;
        max-height: 28px;
        display: flex;
        align-items: center;
      }
    }
  }

  .create-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    padding-bottom: calc(66px + env(safe-area-inset-bottom));
    border-top: 1px solid #e5e5ea;
    background: #fafafa;
  }
}
</style>
